<template>
    <ag-popup class="record-panel" :title="this.recordPanelState == 'add' ? '录制漫游' : '编辑录制漫游'" v-model="visible"
        @onConfirm="onSubmitRecor" @onCancel="onCancel" :confirmVal="'确认'" :cancelVal="'取消'" :confirm="true"
        :cancel="true">
        <el-form :model="recordForm" :rules="rules" ref="recordForm" label-position="right" label-width="100px"
            class="form">
            <h4 class="title">设置漫游参数</h4>
            <el-form-item label="名称" prop="name">
                <el-input size="small" v-model.trim="recordForm.name"></el-input>
            </el-form-item>
            <el-form-item label="漫游分组" prop="classify">
                <el-select size="small" v-model="recordForm.classify">
                    <el-option v-for="item in groupList" :key="item.id" :value="item.id" :label="item.title">
                        {{ item.title }}
                    </el-option>
                </el-select>
            </el-form-item>

            <div v-show="recordPanelState == 'add'">
                <h4 class="title">录制线路</h4>
                <el-form-item label="当前视图" class="record-form-item">
                    <img :src="recordForm.code" />
                </el-form-item>
                <el-form-item label="节点数量" class="record-form-item">
                    <p class="input">{{ recordForm.nodeNumber }}</p>
                    <div class="nodeControl">
                        <el-button size="small" type="primary" ghost @click="onCaptureNode">
                            <i class="el-icon-plus"></i>
                        </el-button>
                        <el-button size="small" type="primary" ghost style="margin-left: 10px" @click="delCaptureNode">
                            <i class="el-icon-minus"></i>
                        </el-button>
                    </div>
                </el-form-item>
            </div>
        </el-form>
    </ag-popup>
</template>
<script>
    import canvas2Image from '@/views/js/extension/canvas2Image.js';
    import AgPopup from '@/views/components/precut/AgPopup.vue';
    import serverData from '@/views/js/api/imageDataApi';
    var agCamera = null;
    let viewer = null;

    export default {
        name: 'addRecordPanel',
        props: {
            groupList: {
                type: Array,
                default () {
                    return [];
                },
            },
        },
        components: {
            'ag-popup': AgPopup,
        },
        data() {
            return {
                visible: false,
                recordPanelState: 'add',

                //录制表单
                recordForm: {
                    name: '',
                    // smoothNumber: 2,
                    nodeNumber: 1,
                    roamType: 'record',
                    code: '',
                    captureNodeList: [],
                    classify: '',
                },

                viewNodeLength: 0,
                isListPanel: true,
                isRecordPanel: false,
                isDrawPanel: false,

                genimgArr: [],
                rules: {
                    name: [{
                            required: true,
                            message: '请输入名称',
                            trigger: 'blur',
                        },
                        {
                            min: 1,
                            max: 20,
                            message: '长度在 1 到 20 个字符',
                            trigger: 'blur',
                        },
                    ],
                    classify: [{
                        required: true,
                        message: '请选择漫游分组',
                        trigger: 'change',
                    }, ],
                },
            };
        },
        mounted() {
            agCamera = agcim.camera.camera;
            viewer = CIM.viewer;

            //获取当前相机图片
            let genimg = canvas2Image.capturePng(viewer, '200', null, 0.8);
            this.genimgArr.push(genimg.src);
            this.recordForm.code = genimg.src;
        },
        methods: {
            onCancel() {
                this.visible = false;
            },
            onShow(item) {
                this.visible = true;
                this.$refs['recordForm'].resetFields();
                if (!(item instanceof Object)) {
                    this.recordPanelState = 'add';
                    this.recordForm = {
                        name: '',
                        classify: item, // 分类id
                        // smoothNumber: 2,
                        nodeNumber: 1,
                        roamType: 'record',
                        code: '',
                        captureNodeList: [],
                    };
                    this.addInitImg();
                } else {
                    this.recordPanelState = 'edit';
                    this.id = item.id; 
                    this.recordForm = JSON.parse(JSON.stringify(item.json));
                }
            },

            addInitImg() {
                let genimg = canvas2Image.capturePng(viewer, '200', null, 0.8);
                this.genimgArr.push(genimg.src);
                this.recordForm.code = genimg.src;
                var s = agCamera.getCameraAsJSON(viewer);
                this.recordForm.captureNodeList.push(s);
                this.recordPanelState = 'add';
            },

            // 点击捕捉节点按钮
            onCaptureNode() {
                var s = agCamera.getCameraAsJSON(viewer);
                this.recordForm.captureNodeList.push(s);
                if (!this.recordForm.nodeNumber) {
                    this.recordForm.nodeNumber = 1;
                }
                this.recordForm.nodeNumber = this.recordForm.nodeNumber + 1;
                let genimg = canvas2Image.capturePng(viewer, '200', null, 0.8);
                this.genimgArr.push(genimg.src);
                this.recordForm.code = this.genimgArr[this.genimgArr.length - 1];
            },
            // 删除上一节点
            delCaptureNode() {
                if (this.recordForm.captureNodeList.length == 1) {
                    return;
                }
                this.recordForm.captureNodeList.pop();
                this.genimgArr.pop();
                this.recordForm.code = this.genimgArr[this.genimgArr.length - 1];
                this.recordForm.nodeNumber = this.recordForm.nodeNumber - 1;
                var lastCaptureNode = this.recordForm.captureNodeList[
                    this.recordForm.captureNodeList.length - 1
                ];
                viewer.scene.camera.setView({
                    destination: lastCaptureNode.position,
                    orientation: {
                        heading: lastCaptureNode.heading,
                        pitch: lastCaptureNode.pitch,
                        roll: lastCaptureNode.roll,
                    },
                    duration: 1,
                });
            },
            // 录制漫游完成
            onSubmitRecor() {
                let vm = this; 
                this.$refs['recordForm'].validate((valid) => {
                    if (valid) {
                         this.$emit('close');
                        let json = {
                            id: this.viewNodeLength + 1,
                            name: this.recordForm.name,
                            code: this.recordForm.code,
                            captureNodeList: this.recordForm.captureNodeList,
                            roamType: 'record',
                            classify: this.recordForm.classify,
                        };
                        agCamera.resetCamera(viewer);

                        let params = {
                            imageStoreDirId: this.recordForm.classify,
                            imageStoreName: this.recordForm.name,
                            imageStoreInformation: JSON.stringify(json),
                        };

                        let promise;
                        if (this.recordPanelState == 'add') {
                            promise = serverData.saveImageStore(params);
                        } else {
                            params.imageStoreId = this.id;
                            promise = serverData.updateImageStore(params);
                        }
                        promise.then(
                            function (data) {
                                if (data.success) {
                                    this.$message.success(data.message);
                                    vm.$emit('updateList', this.recordForm.classify);
                                    vm.visible = false;
                                }
                            }.bind(this)
                        );
                    } else { 
                        return this.$message.warning('请检查字段是否符合规范');
                    }
                });
            },

        },
    };
</script>
<style scoped>
    .record-panel {
        width: 400px;
        left: 45%;
        top: 100px;
    }

    .record-panel .title {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-indent: 20px;
    }

    .record-panel .form {
        padding: 0 90px 0 10px;
    }

    .record-panel .input {
        font-size: 14px;
    }

    ::v-deep .el-form-item__label {
        color: #fff;
    }
</style>